<!--
/**
 *  弃用页面 宽度不够
 * 该页面是用于 展示 个性化缴费数目清单的订书名单！
 *  --        书籍名称  A  B
 *  --        书籍价格  1  2
 *  -- 订书学生        提示信息
 *      学生A          √  ×   -- √ 订购
 *      学生B          √  ×   -- × 未订购
 */
-->
<template>
  <div class="app-container">

    <!--  名单详情表  -->
    <div v-if="books.length>0">
      <!--  控件  -->
      <el-row :gutter="10" class="mb8">
        <!-- 新增 -->
        <el-col :span="1.5" v-if="false">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                     v-hasPermi="['uniquefees:stu_book:add']">新增
          </el-button>
        </el-col>
        <!-- 修改 -->
        <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleUpdateOpen"
            v-hasPermi="['uniquefees:stu_book:edit']"
          >{{ this.open ? "保存" : "修改" }}
          </el-button>
        </el-col>
        <!-- 删除 -->
        <el-col :span="1.5" v-if="false">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['uniquefees:stu_book:remove']"
          >删除
          </el-button>
        </el-col>
        <!--      导出-->
        <el-col :span="1.5" v-if="false">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['uniquefees:stu_book:export']"
          >导出
          </el-button>
        </el-col>
        <!-- 发布订购名单 -->
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-s-promotion"
            size="mini"
            @click="handleRelease"
            v-hasPermi="['uniquefees:stu_book:release']"
          >发布
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-refresh-left"
            size="mini"
            @click="handleRevokeRelease"
            v-hasPermi="['uniquefees:stu_book:release']"
          >撤回发布
          </el-button>
        </el-col>
      </el-row>
      <!--  表格  -->
      <el-card v-loading="loading">
        <div class="el-table el-table--enable-row-hover el-table--medium">
          <table border="1" cellspacing="0" style="width: 100%;">
            <tbody>
            <tr>
              <td :colspan="books.length+6">
                <div class="cell" style="text-align: center">{{ orderTitle ? orderTitle : "请先设置查询条件" }}</div>
              </td>
            </tr>
            <tr class="el-table__cell el-table__cell is-leaf">
              <td :colspan="2">
                <div class="cell">课程信息</div>
              </td>
              <td v-for="(course, index) in books" :key="index">
                <div class="cell">{{ course.courseName }}</div>
              </td>
              <td :colspan="2">
                <div class="cell">合计</div>
              </td>
              <td :colspan="2">
                <div class="cell">签名</div>
              </td>
            </tr>
            <tr class="el-table__cell el-table__cell is-leaf">
              <td :colspan="2">
                <div class="cell">教材信息</div>
              </td>
              <td v-for="(course, index) in books" :key="index">
                <div class="cell">{{ course.courseBook }}</div>
              </td>
              <td :colspan="2">
                <div class="cell"></div>
              </td>
              <td :colspan="2">
                <div class="cell"></div>
              </td>
            </tr>
            <tr class="el-table__cell el-table__cell is-leaf">
              <td :colspan="2">
                <div class="cell">单价</div>
              </td>
              <td v-for="(course, index) in books" :key="index">
                <div class="cell">{{ (course.price / 100).toFixed(2) }}</div>
              </td>
              <td :colspan="2">
                <div class="cell"></div>
              </td>
              <td :colspan="2">
                <div class="cell"></div>
              </td>
            </tr>
            <tr>
              <td :colspan="1">
                <div class="cell">序号</div>
              </td>
              <td :colspan="1">
                <div class="cell">姓名</div>
              </td>
              <td :colspan="8">
                <div class="cell">
                  {{ remake }}
                </div>
              </td>
            </tr>
            <tr v-for="(student, index) in stu_bookList" :key="index">
              <!--    序号列        -->
              <td :colspan="1">
                <div class="cell">{{ index }}</div>
              </td>
              <!--    姓名列        -->
              <td :colspan="1">
                <div class="cell">{{ student.studentName }}</div>
              </td>
              <!--    订阅书籍   编辑     -->
              <td :colspan="1" v-for="(course, index) in student.courses" :key="'open'+index" v-show="open">
                <div class="cell">
                  <label>
                    <input type="checkbox" v-model="course.subscribe" @click="handleUpdate(student,course)"/>
                    {{ (course.price / 100).toFixed(2) }}
                  </label>
                </div>
              </td>
              <!--    订阅书籍   浏览     -->
              <td :colspan="1" v-for="(course, index) in student.courses" :key="index" v-show="!open">
                <div class="cell">{{ course.subscribe ? (course.price / 100).toFixed(2) : "" }}</div>
              </td>

              <!--      合计价格      -->
              <td :colspan="2">
                <div class="cell">{{ (student.totalPrice / 100).toFixed(2) }}</div>
              </td>
              <!--      签名预留      -->
              <td :colspan="2">
                <div class="cell"></div>
              </td>
            </tr>
            <!-- 合计行 -->
            <tr>
              <!--     合计表头字段       -->
              <td :colspan="2">
                <div class="cell">合计</div>
              </td>
              <!--     合计占位表格       -->
              <td :colspan="books.length">
                <div class="cell"></div>
              </td>
              <!--     总合计       -->
              <td :colspan="2">
                <div class="cell">{{ (totalPrice / 100).toFixed(2) }}</div>
              </td>
              <td :colspan="2">
                <div class="cell"></div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </el-card>

    </div>

    <!--没有添加 书籍信息-->
    <div v-if="!loading && (!books.length>0)">
      <el-result icon="error" title="错误提示" subTitle="您还没有关联教材，请先为交给清单关联教材！">
      </el-result>
    </div>


  </div>
</template>

<script>
import {
  addStu_book,
  delStu_book,
  deptStuBook,
  updateStu_book,
  releaseStu_book,
  revokeReleaseStu_book
} from "@/api/uniquefees/stu_book";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  props: {
    value: [String, Object, Array]
  },
  name: "ListStuBook",
  components: {Treeselect},
  dicts: ['sys_normal_disable', 'semester'],
  data() {
    return {
      //教材信息
      books: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      orderTitle: "",
      // 订购教程名单表格数据
      stu_bookList: [],
      totalPrice: 0,
      remake: '班委收到个人价格表后，按照每位同学的选课需求发放教材、核算每位同学的教材价格,核算好后每位同学必须签字，9月1日前交到教材仓库，缴费时间另行通知。（缴费方式：可以登录新华书店微信小程序交款或者统一收取后交到教材仓库，可现金或者微信支付）。',
      // 部门树选项
      deptOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        deptId: null,
        scheduleId: null,
        semesterYear: null,
        semester: null
      },
      // 表单参数
      form: {},
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        if (newValue && newValue !== oldValue && newValue.length > 0) {
          this.queryParams.scheduleId = newValue[0]
          this.getList();
        } else {
          this.queryParams.scheduleId = null;
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {

  },
  methods: {
    /** 查询订购教程名单列表 */
    getList() {
      this.loading = true;
      deptStuBook(this.queryParams).then(response => {
        this.stu_bookList = response.data.courseStu || [];
        this.books = response.data.courseBooks || [];
        this.totalPrice = response.data.totalPrice || 0;
        this.orderTitle = response.data.title;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        csId: null,
        stuId: null,
        courseId: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.csId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订购教程名单";
    },
    /** 修改按钮操作 */
    handleUpdate(student, course) {
      course.subscribe = !course.subscribe;
      const form = {
        scheduleId: this.queryParams.scheduleId,
        semesterYear: null,
        semester: null,
        deptId: null,
        csId: student.studentId + "-" + course.courseId,
        stuId: student.studentId,
        courseId: course.courseId
      };
      if (course.subscribe) {
        // 选择
        updateStu_book(form).then(response => {
          this.$modal.msgSuccess("修改成功");
        });
      } else {
        // 取消
        delStu_book(student.studentId + "-" + course.courseId).then(response => {
          this.$modal.msgSuccess("修改成功");
        });
      }


    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.csId != null) {
            updateStu_book(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addStu_book(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    handleUpdateOpen() {
      this.open = !this.open;
      this.getList()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const csIds = row.csId || this.ids;
      this.$modal.confirm('是否确认删除订购教程名单编号为"' + csIds + '"的数据项？').then(function () {
        return delStu_book(csIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('uniquefees/stu_book/export', {
        ...this.queryParams
      }, `stu_book_${new Date().getTime()}.xlsx`)
    },
    /** 发布按钮操作 */
    handleRelease() {
      const data = {
        scheduleId: this.queryParams.scheduleId,
        stuBooks: this.stu_bookList,
        courseBooks: this.books,
        orderName: this.orderTitle,

      }
      releaseStu_book(data).then(response => {
        this.$modal.msgSuccess("发布成功！");
      });
    },
    /** 撤回发布发布按钮操作 */
    handleRevokeRelease() {
      const data = {
        scheduleId: this.queryParams.scheduleId,
        stuBooks: this.stu_bookList,
        courseBooks: this.books,
        orderName: this.orderTitle,
      }
      revokeReleaseStu_book(data).then(response => {
        this.$modal.msgSuccess("发布成功！");
      });
    }
  }
};
</script>
